<template>
  <div>
    <bread class="filter">
      <h1>帮助中心</h1>
      <div class="filter-block"><span class="el-icon-search icon"></span></div>
    </bread>
    <page-content isCard>
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="用户管理" name="first">
          <div class="guide-content">
            <el-row class="help-center" v-loading="!loaded">
              <el-col :span="7" class="help-nav">
                <ul v-for="(item, index) in questions" :key="index" @click="handleClick">
                  <router-link v-for="(question, i) in item.questions"
                    tag="li"
                    :key="i"
                    :data-hash="`#${item.model}-q-${i}`"
                    :to="{name: 'help-center', hash: `#${item.model}-q-${i}`}"
                    :class="`#${item.model}-q-${i}` === active ? 'active' : ''">
                    {{question.question}}
                  </router-link>
                </ul>
              </el-col>
              <el-col :span="17" class="help-content custom-scrollbar" @scroll="paperScroll">
                <ul v-for="(item, index) in questions" :key="index">
                  <li v-for="(question, i) in item.questions"
                    class="question-item"
                    :key="i"
                    :id="`${item.model}-q-${i}`">
                    <h5>{{question.question}}</h5>
                    <div v-html="question.answer"></div>
                  </li>
                </ul>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </page-content>
  </div>
</template>

<script>
  import scrollbar from 'mixins/scrollbar';
  import mockData from '../mock.js';

  export default {
    mixins: [scrollbar],
    mounted () {
      const hash = this.$route.hash;
      console.log('我是模拟数据', mockData);
      if (hash && hash.indexOf('-q-') > 0) {
        this.active = hash;
      }
    },
    data() {
      return {
        questions: mockData,
        active: null,
        loaded: true,
        activeName: 'first',
      }
    },
    methods: {
      handleClick(event) {
        console.log(event.target.nodeName);
        if (event.target.nodeName.toLowerCase() === 'li') {
          this.active = event.target.getAttribute('data-hash');
        }
      },
      handleTabClick(tab, event) {
        console.log(tab, event);
      }
    },
    watch: {
      active(value) {
        const offsetTop = $(value).position().top + $(`.help-content`).scrollTop();
        $('.help-content').scrollTop(offsetTop - 40);
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '../help.scss';
</style>

